<template>
     <div class="page-container" v-loading="loading.dataStatus" element-loading-text="正在加载...">
        <el-row>
            <el-col :span="14">
                <el-button type="primary"  @click="addApp"><i class="fa fa-plus"></i> 添加应用</el-button>
                  
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" style="width: 100%"  @selection-change='handleSelectionChange' >
                <el-table-column type="expand">
                    <template scope="props">
                        <el-form label-position="right" inline class="table-expand">
                            <el-form-item label="应用名称:">
                                <span>{{ props.row.Name }}</span>
                            </el-form-item>
                            <el-form-item label="状态:">
                                <span>{{props.row.Status == 1?"正常":"禁用"}}</span>
                            </el-form-item>
                            <el-form-item label="密钥:">
                                <span>{{ props.row.Secret }}</span>
                            </el-form-item>
                            <el-form-item label="备注:">
                                <span>{{ props.row.Remark }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="Name"
                    label="应用名"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="Status"
                    label="状态"
                    width="70">
                     <template scope="scope">
                        <el-tag :type="scope.row.Status === 1 ? 'success' : 'warning'"
                        close-transition>{{scope.row.Status == 1?"正常":"禁用"}}</el-tag>
                    </template>
                </el-table-column>
                 <el-table-column
                    prop="Secret"
                    label="密钥">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template scope="scope">
                        <el-button type="success" @click="showSecret(scope.$index,scope.row)" ><i class="fa fa-info"></i> 查看密钥 </el-button>
                        <el-dropdown @command="handleCommand" trigger="click">
                            <el-button type="danger" @click="setCurrentRow(scope.row)">
                                更多操作<i class="el-icon-caret-bottom el-icon--right"></i>
                            </el-button>
                            <el-dropdown-menu slot="dropdown">
                                 <el-dropdown-item command="resetSecret">重置密钥</el-dropdown-item>
                                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.Status === 1" command="disable">禁用</el-dropdown-item>
                                <el-dropdown-item v-if="scope.row.Status === 0" command="enable">启用</el-dropdown-item>
                                <el-dropdown-item command="remove">删除</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                      
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row style="text-align:center">
            <el-pagination v-if="totalPage > 1"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalCount">
            </el-pagination>
        </el-row>
        
         <el-dialog v-bind:title="dialogName" custom-class="formDialog" :visible.sync="showFormDialog" :close-on-click-modal="false" :show-close="false" @close="dialogClose" v-loading="loading.formStatus" element-loading-text="正在提交...">
            <el-form :model="form" :rules="formRules" ref="form" :label-width="formLabelWidth">
                <el-form-item label="应用名" prop="name" >
                    <el-input type="text" v-model="form.name" :autofocus="true"  auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" v-model="form.remark" :rows="5" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showFormDialog = false"><i class="fa fa-power-off"></i> 取 消</el-button>
                <el-button type="primary" @click="submitForm('form')"><i class="fa fa-save "></i> 确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="查看密钥" custom-class="formDialog" :visible.sync="showSecretDialog" :close-on-click-modal="false" :show-close="false">
            <div style="text-align:center;font-size:12px;">应用Id：<span>{{showingAppId}}</span></div>
            <div style="text-align:center;font-size:16px;font-weight:bold;line-height:36px">应用名：<span>{{showingAppName}}</span></div>
            <div style="text-align:center;font-size:12px;"><span>{{showingSecret}}</span></div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeSecretDialog"><i class="fa fa-power-off"></i> 关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            var validateName = (rule,value,callback)=>{
                if (value === '') {
                    callback(new Error('请输入应用名'))
                } else {
                    callback()
                }
            }
            return {
                tableData: [],//表格数据
                currentRow:{},
                form:{
                    appId:'',
                    name:'',
                    remark:''
                },
                formRules: {
                    name: [
                        { required:true,validator:validateName, trigger: 'blur' }
                    ]
                },
                loading:{
                    formStatus : false,//表单loading
                    dataStatus : false //列表loading
                },
                formLabelWidth: '90px',
                currentPage: 1,
                pageSize:15,
                totalCount:0,
                totalPage:0,
                showFormDialog:false,
                dialogName:'添加应用',
                showSecretDialog:false,
                showingAppId:'',
                showingAppName:'',
                showingSecret:''
            }
        },
        methods: {
                getData(){
                    this.loading.dataStatus = true
                    this.$$api_permission_GetApplicationList(
                        {pageIndex:this.currentPage,pageSize:this.pageSize},
                        data=>{
                                this.loading.dataStatus = false
                                this.currentPage = data.PageIndex
                                this.totalPage = data.TotalPage
                                this.totalCount = data.TotalCount
                                this.tableData= data.DataList
                              },
                              {
                                errFn:()=>{
                                     this.loading.dataStatus = false
                                }
                              }
                    )
                },
                submitForm(formName){
                     this.$refs[formName].validate((valid) => {
                            if (valid) {
                                this.loading.formStatus = true;
                                if(this.form.appId.length<=0){
                                    this.$$api_permission_CreateApplicaiton(this.form,data=>{
                                        this.showFormDialog = false
                                        this.loading.formStatus = false
                                        this.$message({
                                                type: 'success',
                                                message: '添加成功!'
                                        });
                                        this.getData();
                                    },
                                    {
                                        errFn:()=>{
                                            this.loading.formStatus = false
                                        }
                                    })
                                }
                                else{
                                    this.$$api_permission_ChangeApplicationInfo(this.form,data=>{
                                        this.showFormDialog = false
                                        this.loading.formStatus = false
                                        this.$message({
                                                type: 'success',
                                                message: '修改成功!'
                                        });
                                        this.getData();
                                    },
                                    {
                                        errFn:()=>{
                                            this.loading.formStatus = false
                                        }
                                    })
                                }
                              
                            } 
                    })
                },
                addApp(){
                    this.dialogName = '添加应用'
                    this.form.appId = ''
                    this.form.name = ''
                    this.form.remark = ''
                    this.showFormDialog = true
                },
                showSecret(index,row){
                    this.$$api_permission_GetSecret({ appId : row.Id },data=>{
                        this.showingAppId = row.Id
                        this.showingAppName= data.Name
                        this.showingSecret = data.Secret
                        this.showSecretDialog = true;

                    })
                },
                setCurrentRow(row){
                    this.currentRow = row;
                },
                handleCommand(command){
                   let row = this.currentRow
                   switch(command){
                       case "edit":{
                           this.dialogName = '编辑应用'
                           this.form.appId = row.Id
                           this.form.name = row.Name
                           this.form.remark = row.Remark
                           this.showFormDialog = true
                           break
                       }
                       case "disable":{
                           this.$confirm('确定要禁用 '+row.Name+' 吗?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    this.$$api_permission_LockApplication({ appId : row.Id },data=>{
                                        row.Status = 2
                                        this.$message({
                                            type: 'success',
                                            message: data.Msg
                                        });
                                    })
                                }).catch((err) => {

                            });
                           break
                       }
                       case "enable":{
                           this.$confirm('确定要启用 '+row.Name+' 吗?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    this.$$api_permission_UnlockApplication({ appId : row.Id },data=>{
                                        row.Status = 1
                                        this.$message({
                                            type: 'success',
                                            message: data.Msg
                                        });
                                    })
                                }).catch(() => {
                                    
                                });
                           break
                       }
                       case "remove":{
                           this.$confirm('确定要删除 '+row.Name+' 吗?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    this.$$api_permission_RemoveApplication({ appId : row.Id },data=>{
                                        this.getData()
                                        this.$message({
                                            type: 'success',
                                            message: data.Msg
                                        });
                                    })
                                }).catch(() => {
                                    
                                });
                           break
                       }
                       case "resetSecret":{
                           this.$confirm('确定要重置应用 '+row.Name+'的密钥 吗?', '提示', {
                                    confirmButtonText: '确定',
                                    cancelButtonText: '取消',
                                    type: 'warning'
                                }).then(() => {
                                    this.$$api_permission_UpdateSecret({ appId : row.Id },data=>{
                                        this.getData()
                                        this.$message({
                                            type: 'success',
                                            message: data.Msg
                                        });
                                    })
                                }).catch(() => {
                                });
                       }
                   }
                },
                handleCurrentChange(val) {
                    this.currentPage = val
                    this.getData()
                },
                handleSelectionChange(val){
                    this.selectionData=val;
                },
                dialogClose(){
                    this.showFormDialog = false
                },
                closeSecretDialog(){
                    this.showSecretDialog = false
                    this.showingSecret = ''
                    this.showingAppName = ''
                }
        },
        created(){
             this.getData();
        },
        watch: {
            '$route' (to, from) {
                this.getData();
            },
            showAddDialog:function(){
                if(!this.showFormDialog){
                    this.$refs['adminForm'].resetFields();
                }
            }
        }
    }
</script>

<style>
    .table-expand {
        font-size: 0;
    }
    .table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
    .formDialog{
      width:500px;
    }
</style>
